<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Off-canvas Side Menu Demo</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<style>
#menu {
  position: fixed;
  background-color: #252525;
  height: 100%;
  z-index: 10;
  width: 280px;
  color: #bbb;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  font-family: 'Source Sans Pro', sans-serif;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
#menu ul {
  list-style: none;
  margin-top: 0;
  padding: 0
}
#menu ul li { border-bottom: 1px solid #2a2a2a; }
#menu>ul>li>a { border-left: 4px solid #444; }
#menu ul li a {
  color: inherit;
  font-size: 16px;
  display: block;
  padding: 8px 0 8px 10px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-weight: 600;
}
#menu ul a i {
  margin-right: 10px;
  font-size: 18px;
  margin-top: 3px;
  width: 20px;
}
#menu ul a i[class*='fa-caret'] { float: right; }
#menu ul a:hover,
#menu ul a.active {
  background-color: #111;
  border-left-color: #369;
  color: #369;
}
#menu ul a:hover i:first-child { color: #369; }
/* Submenu */
#menu ul li a.active+ul { display: block }
#menu ul li ul {
  margin-top: 0;
  display: none;
}
#menu ul li ul li { border-bottom: none; }
#menu ul li ul li a { padding-left: 30px; }
#menu ul li ul li a:hover { background-color: #1A1A1A; }
/* show menu */
.left { left: -280px; }
.show { left: 0; }
#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #369;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#container { border:1px solid #900;width:700px;margin:60px auto;padding: 50px; }
</style>
</head>
<body>
<!-- menu vertical -->
<nav id="menu" class="left">
  <ul>
    <li><a href="#" class="active"><i class="fa fa-home"></i> Beranda</a></li>
    <li><a href="#"><i class="fa fa-user"></i> Tentang</a></li>
    <li> <a href="#"><i class="fa fa-tags"></i> Kategori <i class="fa fa-caret-down"></i></a>
      <ul>
        <li><a href="#">Musik</a></li>
        <li><a href="#">Film</a></li>
        <li><a href="#">Video</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-phone-square"></i> Kontak</a></li>
  </ul>
  <a href="#" id="showmenu"> <i class="fa fa-align-justify"></i> </a> 
</nav>
<!-- end menu vertical --> 
<div id="container">
  <h2>Demo Side Menu dengan jQuery</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis massa, commodo eu nisi eget, ornare bibendum orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Integer convallis est vel lectus placerat, quis aliquam magna iaculis</p>
</div>
<script>
$("#showmenu").click(function(e){
	e.preventDefault();
	$("#menu").toggleClass("show");
});
	$("#menu a").click(function(event){
		event.preventDefault();
	if($(this).next('ul').length){
	$(this).next().toggle('fast');
	$(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
    }
});
</script>
</body>
</html>